---
import { Code } from 'astro:components';
import Base from './Base.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE } from '../consts';
const { isHome } = Astro.props;
const shepherdIncludeCode = `
	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
	<script type="module" src="shepherd.js/dist/shepherd.js"></script>
  
`;
---

<Base>
  <Header title={SITE_TITLE} isHome={isHome} />
  <main>
    <div class="font-heading mt-8 text-6xl text-center uppercase w-full">
      <img
        class="inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
        src="/img/demo.svg"
        alt="Demo"
      />
    </div>

    <div class="flex justify-center mb-20 w-full">
      <div class="max-w-3xl text-center w-full">
        <div class="hero-including mt-8">
          <h3 class="demo-heading font-heading text-2xl uppercase">
            01. How to Include
          </h3>
          <div class="hero-example-code text-left">
            <Code code={shepherdIncludeCode} lang="js" theme="nord" wrap />
          </div>
        </div>

        <div class="hero-example mt-8">
          <h3 class="demo-heading font-heading text-2xl uppercase">
            02. Example
          </h3>

          <div class="hero-example-code text-left">
            <Code
              code={`
	const tour = new Shepherd.Tour({
		defaultStepOptions: {
			cancelIcon: {
				enabled: true
			},
			classes: 'class-1 class-2',
			scrollTo: { behavior: 'smooth', block: 'center' }
		}
	});

	tour.addStep({
		title: 'Creating a Shepherd Tour',
		text: 'Creating a Shepherd tour is easy. too! Just create a "Tour" instance, and add as many steps as you want.',
		attachTo: {
			element: '.hero-example',
			on: 'bottom'
		},
		buttons: [
			{
				action() {
					return this.back();
				},
				classes: 'shepherd-button-secondary',
				text: 'Back'
			},
			{
				action() {
					return this.next();
				},
				text: 'Next'
			}
		],
		id: 'creating'
	});

	tour.start();
					`}
              lang="js"
              theme="nord"
              wrap
            />
          </div>
        </div>

        <div class="hero-followup font-heading mb-12 mt-12 lg:mb-24 lg:mt-24">
          <div class="bg-navy inline-block mb-4 w-56 lg:mr-4">
            <a
              class="button star bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
              href="https://github.com/shepherd-pro/shepherd"
            >
              ★ on Github
            </a>
          </div>

          <div class="bg-navy inline-block mb-4 w-56">
            <a
              class="button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
              href="https://shepherdjs.dev/docs/"
            >
              View Docs
            </a>
          </div>
        </div>

        <div class="mb-12 mt-8">
          <h3 class="font-heading text-2xl uppercase">
            Brands that use Shepherd
          </h3>

          <div class="flex flex-wrap justify-center w-full">
            <div
              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
            >
              <div
                class="bg-white border-4 border-navy flex items-center justify-center h-full p-6 w-full z-10 md:p-12"
              >
                <img
                  class="h-auto w-full"
                  src="/users/ally.svg"
                  alt=""
                  role="presentation"
                />
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
              </div>
            </div>

            <div
              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
            >
              <div
                class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8"
              >
                <img
                  class="h-auto w-full"
                  src="/users/google.svg"
                  alt=""
                  role="presentation"
                />
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
              </div>
            </div>

            <div
              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
            >
              <div
                class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8"
              >
                <img
                  class="h-auto w-full"
                  src="/users/bonsai.png"
                  alt=""
                  role="presentation"
                />
              </div>

              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <Footer />
</Base>

<!-- Welcome page -->
<script type="module" is:inline>
  'use strict';

  import Shepherd from './node_modules/shepherd.js/dist/shepherd.js';

  (function () {
    function init() {
      var shepherd = setupShepherd();
      setTimeout(function () {
        shepherd.start();
      }, 400);
    }

    function setupShepherd() {
      var shepherd = new Shepherd.Tour({
        defaultStepOptions: {
          cancelIcon: {
            enabled: true
          },
          classes: 'class-1 class-2',
          scrollTo: {
            behavior: 'smooth',
            block: 'center'
          }
        },
        // This should add the first tour step
        steps: [
          {
            text: '\n         <p>\n           Shepherd is a JavaScript library for guiding users through your app.\n           It uses <a href="https://floating-ui.com/" data-test-popper-link>Floating UI</a>,\n           another open source library, to render dialogs for each tour "step".\n         </p>\n        \n         <p>\n           Among many things, Floating UI makes sure your steps never end up off screen or cropped by an overflow.\n           (Try resizing your browser to see what we mean.)\n         </p>\n',
            attachTo: {
              element: '.hero-welcome',
              on: 'bottom'
            },
            buttons: [
              {
                action() {
                  return this.cancel();
                },
                secondary: true,
                text: 'Exit'
              },
              {
                action() {
                  return this.next();
                },
                text: 'Next'
              }
            ],
            id: 'welcome'
          }
        ],
        useModalOverlay: true
      });

      const element = document.createElement('p');
      element.innerText =
        'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.';

      // These steps should be added via `addSteps`
      const steps = [
        {
          title: 'Including',
          text: element,
          attachTo: {
            element: '.hero-including',
            on: 'bottom'
          },
          buttons: [
            {
              action() {
                return this.back();
              },
              secondary: true,
              text: 'Back'
            },
            {
              action() {
                return this.next();
              },
              text: 'Next'
            }
          ],
          id: 'including'
        },
        {
          title: 'Creating a Shepherd Tour',
          text:
            'Creating a Shepherd tour is easy. too! ' +
            'Just create a `Tour` instance, and add as many steps as you want.',
          attachTo: {
            element: '.hero-example',
            on: 'right'
          },
          buttons: [
            {
              action() {
                return this.back();
              },
              secondary: true,
              text: 'Back'
            },
            {
              action() {
                return this.next();
              },
              text: 'Next'
            }
          ],
          id: 'creating'
        },
        {
          title: 'Attaching to Elements',
          text: 'Your tour steps can target and attach to elements in DOM (like this step).',
          attachTo: {
            element: '.hero-example',
            on: 'left'
          },
          buttons: [
            {
              action() {
                return this.back();
              },
              secondary: true,
              text: 'Back'
            },
            {
              action() {
                return this.next();
              },
              text: 'Next'
            }
          ],
          id: 'attaching'
        }
      ];

      shepherd.addSteps(steps);

      // This should add steps after the ones added with `addSteps`
      shepherd.addStep({
        title: 'Centered Shepherd Element',
        text: 'But attachment is totally optional!\n       Without a target, a tour step will create an element that\'s centered within the view.       Check out the <a href="https://shepherdjs.dev/docs/">documentation</a> to learn more.',
        buttons: [
          {
            action() {
              return this.back();
            },
            secondary: true,
            text: 'Back'
          },
          {
            action() {
              return this.next();
            },
            text: 'Next'
          }
        ],
        id: 'centered-example'
      });

      shepherd.addStep({
        title: 'Learn more',
        text: 'Star Shepherd on Github so you remember it for your next project',
        attachTo: {
          element: '.hero-followup',
          on: 'top'
        },
        buttons: [
          {
            action() {
              return this.back();
            },
            secondary: true,
            text: 'Back'
          },
          {
            action() {
              return this.next();
            },
            text: 'Done'
          }
        ],
        id: 'followup',
        modalOverlayOpeningPadding: '10'
      });
      return shepherd;
    }

    function ready() {
      if (
        document.attachEvent
          ? document.readyState === 'complete'
          : document.readyState !== 'loading'
      ) {
        init();
      } else {
        document.addEventListener('DOMContentLoaded', init);
      }
    }

    ready();
  }).call(void 0);
</script>
